<template>
  <div class="editTabsPage" ref="editTabsPage">
    <v-tabs :editableTabs="editableTabs" :voidIndex="voidIndex">
      <template slot="bin" slot-scope="scope">
        <div v-if="!scope.row.isFixed">
          <el-form ref="form" :model="scope.row.formInfo" label-width="80px" :inline="true" size="100%">
            <el-row type="flex" justify="start">
              <el-form-item label="巡检频次">
                <el-select v-model="scope.row.formInfo.inprocess_num" placeholder="placeholder" :class="{isError:scope.row.formInfo.inprocess_num==''}">
                  <el-option label="label" value="value"></el-option>
                </el-select>
                <p class="errorText" v-if="scope.row.formInfo.inprocess_num==''">不能为空</p>
              </el-form-item>
              <el-form-item label="次/">
                <el-select v-model="scope.row.formInfo.inprocess_unit" placeholder="placeholder" :class="{isError:scope.row.formInfo.inprocess_unit==''}">
                  <el-option label="label" value="value"></el-option>
                </el-select>
                <p class="errorText" v-if="scope.row.formInfo.inprocess_unit==''">不能为空</p>
              </el-form-item>
              <el-form-item label="项目编码">
                <el-select v-model="scope.row.formInfo.inprocess_code" placeholder="placeholder" :class="{isError:scope.row.formInfo.inprocess_code==''}">
                  <el-option label="label" value="value"></el-option>
                </el-select>
                <p class="errorText" v-if="scope.row.formInfo.inprocess_code==''">不能为空</p>
              </el-form-item>
            </el-row>
            <el-row type="flex" justify="start">
              <el-form-item label="养护频次">
                <el-select v-model="scope.row.formInfo.upkeep_num" placeholder="placeholder" :class="{isError:scope.row.formInfo.upkeep_num==''}">
                  <el-option label="label" value="value"></el-option>
                </el-select>
                <p class="errorText" v-if="scope.row.formInfo.upkeep_num==''">不能为空</p>
              </el-form-item>
              <el-form-item label="次/">
                <el-select v-model="scope.row.formInfo.upkeep_unit" placeholder="placeholder" :class="{isError:scope.row.formInfo.upkeep_unit==''}">
                  <el-option label="label" value="value"></el-option>
                </el-select>
                <p class="errorText" v-if="scope.row.formInfo.upkeep_unit==''">不能为空</p>
              </el-form-item>
              <el-form-item label="项目编码">
                <el-select v-model="scope.row.formInfo.upkeep_code" placeholder="placeholder" :class="{isError:scope.row.formInfo.upkeep_code==''}">
                  <el-option label="label" value="value"></el-option>
                </el-select>
                <p class="errorText" v-if="scope.row.formInfo.upkeep_code==''">不能为空</p>
              </el-form-item>
            </el-row>
            <el-row type="flex" justify="start">
              <el-form-item label="维修频次">
                <el-select v-model="scope.row.formInfo.maintain_num" placeholder="placeholder" :class="{isError:scope.row.formInfo.maintain_num==''}">
                  <el-option label="label" value="value"></el-option>
                </el-select>
                <p class="errorText" v-if="scope.row.formInfo.maintain_num==''">不能为空</p>
              </el-form-item>
              <el-form-item label="次/">
                <el-select v-model="scope.row.formInfo.maintain_unit" placeholder="placeholder" :class="{isError:scope.row.formInfo.maintain_unit==''}">
                  <el-option label="label" value="value"></el-option>
                </el-select>
                <p class="errorText" v-if="scope.row.formInfo.maintain_unit==''">不能为空</p>
              </el-form-item>
              <el-form-item label="项目编码">
                <el-select v-model="scope.row.formInfo.maintain_code" placeholder="placeholder" :class="{isError:scope.row.formInfo.maintain_code==''}">
                  <el-option label="label" value="value"></el-option>
                </el-select>
                <p class="errorText" v-if="scope.row.formInfo.maintain_code==''">不能为空</p>
              </el-form-item>
            </el-row>
            <el-row type="flex" justify="start">
              <el-form-item label="单位工时" class="w100">
                <el-input v-model="scope.row.formInfo.unitOfTime" :class="{isError:scope.row.formInfo.unitOfTime==''}"></el-input>
                <p class="errorText" v-if="scope.row.formInfo.unitOfTime==''">不能为空</p>
              </el-form-item>
            </el-row>
            <el-row type="flex" justify="start">
              <el-form-item label="养护内容" class="w100">
                <el-input type="textarea" v-model="scope.row.formInfo.upkeepContent" placeholder="" :class="{isError:scope.row.formInfo.upkeepContent==''}"></el-input>
                <p class="errorText" v-if="scope.row.formInfo.upkeepContent==''">不能为空</p>
              </el-form-item>
            </el-row>
            <el-row type="flex" justify="start">
              <el-form-item label="巡检内容" class="w100">
                <el-input type="textarea" v-model="scope.row.formInfo.inprocessContent" placeholder="" :class="{isError:scope.row.formInfo.inprocessContent==''}"></el-input>
                <p class="errorText" v-if="scope.row.formInfo.inprocessContent==''">不能为空</p>
              </el-form-item>
            </el-row>
          </el-form>
        </div>
        <div v-if="scope.row.isFixed">
          应急预案
        </div>
      </template>
    </v-tabs>
    <el-button type="primary" @click="submit('form')">提交</el-button>
  </div>
</template>

<script>
import VTabs from '@/components/EditTabs.vue';
export default {
  components: {
    VTabs
  },
  data () {
    return {
      voidIndex: {},
      editableTabs: [{
        name: '维护信息1',
        isFixed: false,
        formInfo: {
          inprocess_num: 1,
          inprocess_unit: '日',
          inprocess_code: 'X050100901',
          upkeep_num: 1,
          upkeep_unit: '日',
          upkeep_code: 'X050100904',
          maintain_num: 1,
          maintain_unit: '日',
          maintain_code: 'X050100909',
          unitOfTime: 10,
          upkeepContent: '',
          inprocessContent: '巡检的内容'
        }

      }, {
        name: '应急预案',
        isFixed: true,
      }],
    }
  },
  methods: {
    submit (formName) {
      console.log(this.editableTabs)
      for (let i = 0; i < this.editableTabs.length; i++) {
        for (let j in this.editableTabs[i].formInfo) {
          // console.log(this.editableTabs[i].formInfo[j])
          if (this.editableTabs[i].formInfo[j] == '') {
            console.log('1111111111', i, j)
            this.voidIndex = {
              idx: i,
              temp: new Date().getTime()
            }
          }
        }
      }
      this.$nextTick(() => {
        let errList = this.$refs.editTabsPage.querySelectorAll('.errorText')
        if (errList.length > 0) {
          console.log('校验没通')
        } else {
          console.log('校验通过')
        }
      })
    }
  }
}
</script>

<style lang="stylus">
.editTabsPage {
  .w100 {
    width 100% !important
    .el-form-item__content {
      width 84%
    }
  }
  .errorText {
    margin 0
    padding 0
    height 25px
    line-height 25px
    color red
    text-align left
  }
  .isError {
    border 1.3px solid red
    border-radius 5px
  }
}
</style>